<template>
	<view class="body">
		<myHead :title="title" />
		   <scroll-view scroll-y="true" class="scroll-Y" style="height: 80%;">
			   
			  
			   <uni-table border stripe emptyText="暂无更多数据" :border="true" :stripe="true" >
			       <!-- 表头行 -->
			       <uni-tr width="100%">
			           <uni-th align="center" :class="{'userImg':true}" style="width: 10%;">头像</uni-th>
			           <uni-th align="center" style="width: 10%;">姓名</uni-th>
			           <uni-th align="center" style="width: 10%;">求是币</uni-th>
			           <uni-th align="center" style="width: 10%;">等级
					   <uni-tag style="display: inline-block;margin-left:5%;" 
					   text="?" type="warning" size="default" :circle="true" @click="help"></uni-tag>
					   </uni-th>
			       </uni-tr>
			       <uni-tr v-for="(item,index) in doloadData">
			           <uni-th align="center" class="myimgs">
						   <image :style="'width:'+width+'px; height:'+width+'px;'" :src="item.img" mode=""></image>
					   </uni-th>
			           <uni-th align="center">{{item.realName}}</uni-th>
			           <uni-th align="center">{{item.score}}</uni-th>
			           <uni-th align="center">{{item.score===null?'':myswich(item.score)}}</uni-th>
			       </uni-tr>
			   </uni-table>
			   <!-- 加载更多 -->
			   <uni-load-more
			   	 @clickLoadMore="doclickLoadMore" 
			   	:status="doloadMore" :showIcon="false"
			   	iconType="auto" 
			   	:contentText="{
			   	contentdown: '点击显示更多',
			   	contentrefresh: '正在加载...',
			   	contentnomore: '没有更多数据了'}">
			   </uni-load-more>
			 
		 </scroll-view>
	</view>
</template>

<script>
	import {rankUser} from '@/api/api_bi.js'
	import {QSSwich} from '@/api/qiushiSwich.js'
	import myHeader from '../components/head.vue'
	export default {
		data(){
			return {
				title:"求是排名",
				pageParam:{
							"current": 1,
							"pageSize": 10,
							"param": ""
						},
				width:50,
				doloadMore : '',
				doloadData:[],
			}
		},components:{
				myHead:myHeader,
			},
			mounted() {
				this.doclickLoadMore();
				let _this = this 
				let query = uni.createSelectorQuery();
				query.select('.userImg').boundingClientRect(data => {
					console.log(data)
				  _this.width = data.width/2
				}).exec()
			},
		methods: {
			help(){
				uni.showModal({
					align:'left',
					showCancel:false,
					confirmText:'收到',
				    title: '排行说明',
				    content: '根据当前的求是币来排名，\n'+
					'10币提升一级，由高到低依次为：\n'+
					'元帅1级:元帅(150以上)\n'+
					'将官4级:大将、上将、中将、少将；(120~150)\n'+
					'校官4级:大校、上校、中校、少校；(80~110)\n'+
					'尉官4级:大尉、上尉、中尉、少尉；(40~70)\n'+
					'士官3级:上士、中士、下士(10~30)\n'+
					'士兵1级:上等兵(10以下)。',
					confirmColor:"red",
				});
			},
			myswich(ars){
				return QSSwich(ars)
			},
			doclickLoadMore(){//待处理会议
				this.doloadMore = 'loading'
				let _this = this;
					rankUser(
					_this.pageParam
					).then(res =>{
						_this.doloadMore = 'more'
						if(res.total<_this.pageParam.pageSize){
							 _this.doloadMore = 'noMore'
						}
					//处理过程
					_this.pageParam.current++;
					_this.doloadData = _this.doloadData.concat(res.records)
					// _this.param.pageSize = res.size
					// _this.param.total = res.total
					})
			}
		},
	}
</script>
<style lang="scss" scoped>	
	.body{
		/deep/ table{
			min-width:0!important;
			.myimgs{
				padding: 0px;
			}
			
			.uni-table-th-content{
				width: 100%;
				height:100%;
			uni-image{
				width: 100%;
				height:100%;
				border-radius: 50%;
				// div{
				// 	min-height: 120upx;
				// }
			}
			}
		}
		
	}
</style>